<template>
  <div class="time-range-picker">
    <div class="time-display">
      <el-time-picker
        v-model="startTime"
        placeholder="开始时间"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        @change="handleTimeChange"
      />
      <span class="separator">-</span>
      <el-time-picker
        v-model="endTime"
        placeholder="结束时间"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        @change="handleTimeChange"
      />
    </div>

    <div
      class="time-line"
      @mousedown="startDrag"
      @mouseup="stopDrag"
      @mouseleave="stopDrag"
    >
      <div
        class="selection"
        :style="selectionStyle"
        v-show="showSelection"
      ></div>
      <div class="disabled-ranges">
        <div
          v-for="(range, index) in disabledRanges"
          :key="index"
          class="disabled-range"
          :style="getDisabledStyle(range)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  disabledRanges: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['change']);

const startTime = ref(null);
const endTime = ref(null);
const isDragging = ref(false);
const dragStartX = ref(0);
const currentX = ref(0);
const containerWidth = ref(0);

// 计算选择区域样式
const selectionStyle = computed(() => {
  const left = Math.min(dragStartX.value, currentX.value);
  const width = Math.abs(currentX.value - dragStartX.value);
  return {
    left: `${(left / containerWidth.value) * 100}%`,
    width: `${(width / containerWidth.value) * 100}%`
  };
});

const showSelection = computed(() => isDragging.value || (startTime.value && endTime.value));

// 时间转换方法
function convertToMinutes (time) {
  return time.getHours() * 60 + time.getMinutes();
}

function convertToTime (minutes) {
  return new Date(0, 0, 0, Math.floor(minutes / 60), minutes % 60);
}

// 获取禁用时间样式
function getDisabledStyle (range) {
  const start = (convertToMinutes(range[0]) / 1440) * 100;
  const end = (convertToMinutes(range[1]) / 1440) * 100;
  return {
    left: `${start}%`,
    width: `${end - start}%`
  };
}

// 拖动处理
function startDrag (event) {
  const rect = event.target.getBoundingClientRect();
  containerWidth.value = rect.width;
  dragStartX.value = event.clientX - rect.left;
  currentX.value = dragStartX.value;
  isDragging.value = true;
  window.addEventListener('mousemove', handleDrag);
}

function handleDrag (event) {
  if (!isDragging.value) return;
  const rect = event.target.getBoundingClientRect();
  currentX.value = Math.max(0, Math.min(event.clientX - rect.left, rect.width));

  const startMinutes = (dragStartX.value / containerWidth.value) * 1440;
  const currentMinutes = (currentX.value / containerWidth.value) * 1440;

  const [start, end] = [startMinutes, currentMinutes].sort((a, b) => a - b);

  startTime.value = convertToTime(start);
  endTime.value = convertToTime(end);
}

function stopDrag () {
  isDragging.value = false;
  window.removeEventListener('mousemove', handleDrag);
  checkDisabledRanges();
  emit('change', [startTime.value, endTime.value]);
}

// 校验禁用时间
function checkDisabledRanges () {
  if (!startTime.value || !endTime.value) return;

  const start = convertToMinutes(startTime.value);
  const end = convertToMinutes(endTime.value);

  for (const [disabledStart, disabledEnd] of props.disabledRanges) {
    const ds = convertToMinutes(disabledStart);
    const de = convertToMinutes(disabledEnd);

    if ((start >= ds && start < de) || (end > ds && end <= de)) {
      startTime.value = null;
      endTime.value = null;
      break;
    }
  }
}

// 禁用时间配置
const disabledHours = () => [/* 禁用的小时，例如：0, 1, 2 */];
const disabledMinutes = (hour) => [/* 禁用的分钟，例如：30, 31, 32 */];

function handleTimeChange () {
  emit('change', [startTime.value, endTime.value]);
}
</script>

<style scoped>
.time-range-picker {
  width: 600px;
  padding: 20px;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.separator {
  color: #666;
}

.time-line {
  position: relative;
  height: 40px;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
}

.selection {
  position: absolute;
  height: 100%;
  background: rgba(64, 158, 255, 0.3);
  pointer-events: none;
}

.disabled-ranges {
  position: absolute;
  width: 100%;
  height: 100%;
}

.disabled-range {
  position: absolute;
  height: 100%;
  background: rgba(255, 73, 73, 0.3);
  pointer-events: none;
}
</style>